<template>
	<div class="easyd-weixin-Box ">
		<div class="app_page_box app_list_box" style="">
			<div class="check_box_top">
				<div @click="chuanzhi">确定</div>
				<div @click="guanbi">取消</div>
			</div>
			<div class="cjeck_box_major">
				<div class="institution_major">机构专业：</div>
				<div class="selected_classification">
					<div v-for="dataList in dataLists" @click="box_close(dataList.c_name)">
						<p v-text="dataList.c_name"></p>
						<span class="fa fa-times-circle-o"></span>
					</div>
				</div>
			</div>
			<div class="templateCategoryBox">
				<div class="templateCategoryLeftBox">
					<div class="templateCategoryLeftBoxItem" @click="templateOneCategoryClick(oneItem.cid,oneItem.c_name,index)" v-for="(oneItem,index) in oneCategoryData" :class="{action_bg:oneItem.style,close_bg:!oneItem.style}">
						{{oneItem.c_name}}
					</div>
				</div>
				<div class="templateCategoryRightBox">
					<div class="templateCategoryRightBoxItems" v-for="(twoItem,index) in twoCategoryData" @click="templateTwoCategoryClick(index,twoItem.cid,twoItem.c_name)" :class="{action:twoItem.aclei,close:!twoItem.aclei}">{{twoItem.c_name}}
					</div>
				</div>

			</div>
		</div>
	</div>
</template>
<script type="text/ecmascript-6">
	import { mapState, mapMutations } from "vuex";

	export default {
		//生命周期函数
		mounted() {
			this.getCategoryData();
			
			if(this.stateDataList != '' && this.stateDataList != null && this.stateDataList != undefined){
				var newArrs = JSON.parse(this.stateDataList);
				
				for(var i = 0; i < newArrs.length; i++) {
					if(newArrs[i].c_name != "") {
						this.dataLists.push(newArrs[i])
					}
				}
				
			}


		},
		computed: {
			...mapState({
//				stateDataList: state => state.ArtCategoryModule.dataList,
			    stateDataList : state => state.AddClientModule.form.schoolType,
			}),
		},
		data() {
			return {
				getdata: [],
				dataLists: [],

				oneCategoryData: [],
				twoCategoryData: [],
			}
		},

		methods: {
			//		    点击删除选项
			box_close(c_name) {
				console.log(c_name);
				for(var i = 0; i < this.dataLists.length; i++) {
					if(this.dataLists[i].c_name == c_name) {
						this.dataLists.splice(i, 1);
						console.log(this.dataLists)
					}
				}
				for(var i = 0; i < this.twoCategoryData.length; i++) {
					if(this.twoCategoryData[i].c_name == c_name) {
						this.twoCategoryData[i].aclei = false
					}

				}

			},
			templateOneCategoryClick(cid, c_name, index) {
				for(var i = 0; i < this.oneCategoryData.length; i++) {
					this.oneCategoryData[i].style = true
				}
				this.oneCategoryData[index].style = false;
				this.getTwoCategoryData(cid);
			},
			getCategoryData() {

				var that = this;
				this.$easyUtil.startLoading(this);
				this.$http.getHttp(
					this.$API.artCategorySearch,
					rs => {
						console.log(rs);
						this.$easyUtil.endLoading(this);
						that.categoryData = rs.data;
						for(var i = 0; i < that.categoryData.length; i++) {
							that.categoryData[i].aclei = false;

						}
						that.getOneCategoryData();
						that.getTwoCategoryData(that.oneCategoryData[0].cid);
					})

			},
			//获取一级分类
			getOneCategoryData() {

				var tempData = [];
				for(var i = 0; i < this.categoryData.length; i++) {
					if(this.categoryData[i].c_fid == 0) {
						tempData.push(this.categoryData[i]);
					}
				}
				for(var i = 0; i < tempData.length; i++) {
					tempData[i].style = true;
				}
				tempData[0].style = false;
				this.oneCategoryData = tempData;

			},
			//获取二级分类
			getTwoCategoryData(cid) {
				var tempData = [];
				for(var i = 0; i < this.categoryData.length; i++) {
					if(this.categoryData[i].c_fid == cid) {
						tempData.push(this.categoryData[i]);
					}

				}
				if(this.dataLists.length > 0) {
					for(var i = 0; i < tempData.length; i++) {
						for(var d = 0; d < this.dataLists.length; d++) {
							if(tempData[i].c_name == this.dataLists[d].c_name) {
								tempData[i].aclei = true
							}
						}
					}
				}

				this.twoCategoryData = tempData;

			},
			templateTwoCategoryClick(index, ids, c_name) {
				if(this.twoCategoryData[index].aclei == false) {
					var arr = {}
					arr.ids = ids;
					arr.c_name = c_name;
					this.dataLists.unshift(arr);
					console.log(this.dataLists)
				} else if(this.twoCategoryData[index].aclei == true) {
					for(var i = 0; i < this.dataLists.length; i++) {
						if(this.dataLists[i].c_name == c_name) {
							this.dataLists.splice(i, 1);
							console.log(this.dataLists)
						}
					}
				}

				var ccc = [];
				ccc = this.twoCategoryData;
				this.twoCategoryData = [];
				ccc[index].aclei = !ccc[index].aclei;
				this.twoCategoryData = ccc

			},
			//			跳转页面传值处理
			chuanzhi() {
				
				var c_name = "";
				for(var i = 0; i < this.dataLists.length; i++) {
					var name = this.dataLists[i].c_name + ",";
					c_name += name;

				}
				
				c_name = c_name.slice(0, c_name.length - 1);
				
				this.$store.commit('AddClientModule/updateSchoolType',JSON.stringify(this.dataLists));
				this.$store.commit('AddClientModule/updateSchoolTypeStr',c_name);

				this.$router.go(-1);
			},
			//			跳转页面 不传值
			guanbi() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~PUBLIC_CSS';
	.templateCategoryBox {
		width: 100%;
		height: auto;
		position: relative;
		overflow: auto;
		z-index: 99;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	
	.cjeck_box_major .selected_classification div p {
		margin: 0;
	}
	
	.cjeck_box_major .selected_classification div span {
		position: absolute;
		top: -6px;
		right: -5px;
		color: red;
	}
	
	.cjeck_box_major .selected_classification div {
		margin: 5px 9px 0 0;
		padding: 3px 5px;
		font-size: 15px;
		border: 1px solid #999;
		border-radius: 4px;
		position: relative;
	}
	
	.cjeck_box_major .selected_classification {
		display: flex;
		flex-wrap: wrap;
		width: 69%;
	}
	
	.cjeck_box_major .institution_major {
		font-size: 18px;
	}
	
	.cjeck_box_major {
		width: 92%;
		margin: 10px auto;
		color: #999;
		display: flex;
		justify-content: space-between;
	}
	
	.check_box_top {
		display: flex;
		height: 50px;
		line-height: 50px;
		color: #3687f5;
		font-size: 18px;
		border-bottom: 1px solid #eee;
		justify-content: space-between;
		width: 92%;
		margin: 0 auto;
	}
	
	.templateCategoryBox .templateCategoryLeftBox {
		width: 100px;
		height: 300px;
		height: auto;
		background: #fff;
		float: left;
	}
	
	.templateCategoryBox .templateCategoryLeftBox .action_bg {
		background: #eee;
	}
	
	.templateCategoryBox .templateCategoryLeftBox .close_bg {
		background: #fff;
	}
	
	.templateCategoryBox .templateCategoryLeftBox .templateCategoryLeftBoxItem {
		width: 100px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 12px;
	}
	
	.templateCategoryBox .templateCategoryLeftBox .templateCategoryLeftBoxItem:last-child {
		border-bottom: none;
	}
	
	.templateCategoryBox .templateCategoryRightBox {
		position: absolute;
		left: 100px;
		right: 0px;
		border-left: 1px solid #eee;
		top: 0px;
		padding: 5px;
		bottom: 0px;
	}
	
	.templateCategoryBox .templateCategoryRightBox .action {
		background: #fbd415;
	}
	
	.templateCategoryBox .templateCategoryRightBox .close {
		background: #fff;
	}
	
	.templateCategoryBox .templateCategoryRightBox .templateCategoryRightBoxItems {
		text-align: center;
		font-size: 12px;
		float: left;
		border: 1px solid #eee;
		border-radius: 5rem;
		padding: 1px 10px;
		margin: 7px 3%;
		width: auto;
		height: auto;
		line-height: 20px;
	}
</style>